<template>
  <div style="width: auto;height: 583px" id="echarts1">
  </div>
</template>
 
<script>
import echarts from 'echarts'
const colors = ['#ffce7b', '#FFA07A']
export default {
  name: 'echarts1',
  data () {
    return {
      // option配置
      option: {
        title: {
          text: '用电信息',
          left: 'center',
          textStyle: {
            color: '#FFA07A'
          }
        },
        color: colors,
        tooltip: {
          trigger: 'item',
          axisPointer: {
            type: 'cross'
          }
        },
        legend: {
          orient: 'vertical',
          left: 'right',
          textStyle: {
            color: '#f58220'
          }
        },
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 1,
              color: "#ffce7b", // 0% 处的颜色
            },
            {
              offset: 0,
              color: "#FFA07A", // 100% 处的颜色
            },
          ]),
        grid: {
          top: 80,
          bottom: 40
        },
        xAxis: [
          {
            type: 'category',
            axisTick: {
              alignWithLabel: true
            },
            axisLine: {
              onZero: false,
              lineStyle: {
                color: colors[1]
              }
            },
            axisPointer: {
              label: {
                formatter: function (params) {
                  return (
                    'Power Consumption  ' +
                    params.value +
                    (params.seriesData.length ? '：' + params.seriesData[0].data : '')
                  )
                }
              }
            },
            // prettier-ignore
            data: ['2024-1', '2024-2', '2024-3', '2024-4', '2024-5', '2024-6', '2024-7', '2024-8', '2024-9', '2024-10', '2024-11', '2024-12']
          },
          {
            type: 'category',
            axisTick: {
              alignWithLabel: true
            },
            axisLine: {
              onZero: false,
              lineStyle: {
                color: colors[0]
              }
            },
            axisPointer: {
              label: {
                formatter: function (params) {
                  return (
                    'Power Consumption  ' +
                    params.value +
                    (params.seriesData.length ? '：' + params.seriesData[0].data : '')
                  )
                }
              }
            },
            data: ['2023-1', '2023-2', '2023-3', '2023-4', '2023-5', '2023-6', '2023-7', '2023-8', '2023-9', '2023-10', '2023-11', '2023-12'],
          }
        ],
        yAxis: [
          {
              type: 'value',
              name: '耗电量/kw                    ',
              axisLine: {
              lineStyle: {
                color: '#FFA07A', // 这里设置 Y 轴线的颜色
                 symbol: 'arrow'
                }
              },
              axisTick: {
              show: true,
              lineStyle: {
                  color: '#faa755' // 这里设置 Y 轴刻度线的颜色
            }
        },
          }
        ],
        series: [
          {
            name: '耗电量(2023)',
            type: 'line',
            xAxisIndex: 1,
            smooth: true,
            emphasis: {
              focus: 'series'
            },
            data: [
              2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
            ]
          },
          {
            name: '耗电量(2024)',
            type: 'bar',
            smooth: true,
            emphasis: {
              focus: 'series'
            },
            data: [
              3.9, 5.9, 11.1, 18.7, 48.3, 69.2, 231.6, 46.6, 55.4, 18.4, 10.3, 0.7
            ]
          }
        ]
      }
    }
  },
  mounted () {
    this.echartsInit()
  },
  methods: {
    echartsInit () {
      // 挂载在生命周期中
      echarts.init(document.getElementById('echarts1')).setOption(this.option)
    }
  }
}
</script>
 
<style scoped>
 
</style>